<template>
    <view class="wai">
        <!-- 顶部头像信息 -->
        <view class="bgi-top">
            <image class="bgi" src="@/static/bgi1.png" mode=""></image>
            <view class="box-toux">
                <image class="img" src="@/static/my.png" mode=""></image>
                <view class="box-flex">
                    <view>XX店铺名</view>
                    <view class="phone">132****9087</view>
                </view>
            </view>
            <view class="quan">
                <view class="quan-top">
                    <view class="list1">
                        <view class="text">1.00</view>
                        <view>累计抵用券</view>
                    </view>
                    <view class="list1">
                        <view class="text">34</view>
                        <view>累计订单</view>
                    </view>
                    <view class="list1">
                        <view class="text">65</view>
                        <view>累计粉丝</view>
                    </view>
                </view>
                <view class="btm1">
                    <view>可激活抵用券</view>
                    <view class="btm-txt">
                        <view class="pric1">1.00</view>
                        <wd-icon name="arrow-right" size="22px" color="#F8BB4F"></wd-icon>
                    </view>
                </view>
            </view>
        </view>
        <!-- 奖励明细 -->
        <view class="center">
            <view class="centr-box">
                <image class="image" src="@/static/invite.png" mode=""></image>
                <view>奖励明细</view>
            </view>
            <view class="centr-box">
                <image class="image" src="@/static/invite.png" mode=""></image>
                <view>我的粉丝</view>
            </view>
            <view class="centr-box">
                <image class="image" src="@/static/invite.png" mode=""></image>
                <view>粉丝订单</view>
            </view>
            <view class="centr-box">
                <image class="image" src="@/static/invite.png" mode=""></image>
                <view>我的邀请人</view>
            </view>
        </view>
        <!-- 订单推广海报 -->
        <view class="btm">
            <view class="fans">
                <view class="text">34</view>
                <view>今日订单</view>
            </view>
            <view class="fans">
                <view class="text">650</view>
                <view>今日粉丝</view>
            </view>
            <view class="tuig">推广海报</view>
        </view>
    </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.wai {
    // 订单推广海报
    .btm {
        .tuig {
            font-weight: 700;
            font-size: 32rpx;
        }
        .fans {
            .text {
                margin-bottom: 10rpx;
                font-size: 48rpx;
                font-weight: 700;
                color: #333;
            }
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
        }
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 686rpx;
        height: 196rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin: 0 32rpx;
        margin-top: 34rpx;
    }
    // 奖励明细
    .center {
        .centr-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            .image {
                width: 70rpx;
                height: 72rpx;
                margin-bottom: 10rpx;
            }
        }
        display: flex;
        justify-content: space-evenly;
        width: 686rpx;
        background: #ffffff;
        border-radius: 15rpx;
        padding: 46rpx 0 32rpx 0;
        margin: auto;
        margin-top: 246rpx;
    }
    .bgi-top {
        // 抵用券
        .quan {
            .btm1 {
                .btm-txt {
                    .pric1 {
                        font-size: 24rpx;
                        margin-right: 20rpx;
                        color: #f8bb4f;
                    }
                    display: flex;
                    align-items: center;
                }
                // height: 94rpx;
                padding: 22rpx 48rpx 28rpx 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .quan-top {
                .list1 {
                    .text {
                        font-size: 48rpx;
                        font-weight: 700;
                        margin-bottom: 10rpx;
                        color: #000;
                    }
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #999999;
                    font-size: 24rpx;
                }
                height: 194rpx;
                border-bottom: solid #cccccc 2rpx;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
            }
            position: absolute;
            left: 32rpx;
            top: 190rpx;
            width: 686rpx;
            height: 290rpx;
            background: #ffffff;
            border-radius: 15rpx;
        }
        .box-toux {
            .box-flex {
                .phone {
                    font-size: 24rpx;
                }
                font-size: 36rpx;
                color: #fff;
            }
            .img {
                width: 108rpx;
                height: 108rpx;
                border-radius: 50%;
                margin-right: 30rpx;
            }
            display: flex;
            align-items: center;
            position: absolute;
            left: 50rpx;
            top: 32rpx;
        }
        .bgi {
            height: 266rpx;
            width: 100%;
        }
        position: relative;
    }
    min-height: 100vh;
    background-color: #f7f7f7;
}
</style>
